<template>
	<view class="repair">
		<view class="repair-input">
			<view class="fulNew">
				<view class="fulNew_left"> {{type == 1?'报价':'成交价'}} </view>
				<view class="fulNew_right" style="width: 500rpx">
					<input type="digit" v-model="editForm.money" placeholder="请输入价格" @input="checkAmount" />
				</view>
			</view>
			<view class="fulNew" v-if="type == 2&&type_data==0">
				<view class="fulNew_left"> 质保时间</view>
				<view class="fulNew_right" style="width: 500rpx">
					<input type="number" v-model="editForm.qa_time" placeholder="请输入质保时间(月)" />
				</view>
			</view>
		</view>
		<view class="repair-w" v-if="type == 1">
			<view class="repair-w-n"> 报价说明 </view>
			<view class="repair-w-q">
				<textarea v-model="editForm.remarks"
					placeholder-style="font-size:28rpx;line-height:34rpx;color:#B6BDBD;"
					style="height: 120rpx; width: 100%" placeholder="请输入说明" />
			</view>
		</view>
		<view class="repair-w" v-if="type == 1">
			<view class="repair-w-n"> 图片 </view>
			<view class="repair-w-q">
				<view class="repair-w-q-i">
					<view class="repair-w-q-i-a" v-for="(item, index) in imgs_list" :key="index">
						<image :src="item" style="width: 100%; height: 100%; z-index: 99" @click="preImage(index)" />
						<image src="../../static/del.png" class="del" @tap="del_img(index)" />
					</view>
					<view class="repair-w-q-i-c" v-if="imgs_list.length < 3" @tap="upImgs">
						<image src="../../static/camera.png" class="img" />
					</view>
				</view>
				<view class="repair-w-q-p"> 支持上传3张jpg/png </view>
			</view>
		</view>
		<view class="submit" @tap="handleSumbit"> 提交 </view>
	</view>
</template>

<script>
	import xflSelect from "@/components/xfl-select/xfl-select.vue";
	import baseUrl from "@/request/baseUrl.js";
	export default {
		components: {
			xflSelect, //注册为子组件
		},
		data() {
			return {
				editForm: {},
				imgs_list: [], // 物流照片列表
				type: 1,
				type_data: 0,
				default_final: {}
			};
		},
		onLoad(e) {
			this.type_data = e.type_data || 0
			this.default_final = e.default_final ? JSON.parse(e.default_final) : null
			this.editForm = !typeof(e.default_final) ? JSON.parse(e.default_final) : {}
			this.editForm.warranty_id = e.id
			this.type = e.type
			uni.setNavigationBarTitle({
				title: e.default_final ? '编辑' : "新增"
			})
		},
		computed: {
			express() {
				return this.editForm.express_type == "寄件" ? "收件" : "寄件";
			},
		},
		methods: {
			// 小数点后2位
			checkAmount(e) {
				e = (e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					this.editForm.money = e
				})
			},
			// 切换类型
			typeChange(e) {
				this.editForm.express_type = e.detail.value;
			},
			/* 删除照片 */
			del_img(i) {
				this.imgs_list.splice(i, 1);
			},
			/* 图片预览 */
			preImage(current) {
				uni.previewImage({
					current,
					urls: this.imgs_list,
				});
			},
			/* 图片上传 */
			upImgs() {
				const token = uni.getStorageSync("userInfo").token;
				uni.chooseImage({
					count: 3 - this.imgs_list.length,
					sourceType: ["album", "camera"], // album 从相册选图，camera 使用相机，默认二者都有
					success: (res) => {
						res.tempFilePaths.forEach((item) => {
							uni.uploadFile({
								url: `${baseUrl}api/common/upload`,
								filePath: item,
								name: "file",
								formData: {
									token: token, // 上传附带参数
								},
								success: (res1) => {
									if (res1.data.code == 0) {
										uni.showToast({
											title: res1.data.msg,
											icon: "error",
										});
									} else {
										let img = JSON.parse(res1.data).data.fullurl;
										this.imgs_list.push(img);
									}
								},
								fail: () => {
									uni.showToast({
										title: "上传失败",
										icon: "error",
									});
								},
							});
						});
					},
					fail: () => {
						uni.showToast({
							title: "上传失败",
							icon: "error",
						});
					},
				});
			},
			isMobile(mobile) {
				return /^1[3-9]\d{9}$/.test(mobile);
			},
			/* 提交 */
			handleSumbit() {
				if (!this.editForm.money) {
					uni.showToast({
						icon: "none",
						title: `请输入价格`,
					});
					return;
				}

				if (this.type == 1) {
					this.editForm.image = this.imgs_list.toString();
				}

				let url = this.type == 1 ? '/warranty/add_offer' : (this.default_final != null ? '/warranty/update_final' :
					'/warranty/addupfinal')
				console.log(this.editForm, 'this.editForm----------',this.default_final)
				this.$https.post(url,this.editForm).then((res) => {
					uni.showToast({
						title: "提交成功",
						icon: "none",
						duration: 1500,
						success: () => {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
								});
							}, 1500);
						},
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.fulNew {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		line-height: 100rpx;
		color: #3b3d3d;
		font-weight: 500;
		border-bottom: 2rpx solid #f6f7fb;
		background-color: #fff;
		font-size: 28rpx;

		.scode {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.del {
		position: absolute;
		width: 32rpx;
		height: 32rpx;
		top: 0rpx;
		right: 0rpx;
		border-radius: 50% !important;
		background-color: #ffffff;
		z-index: 99999;
	}

	.submit {
		width: 622rpx;
		height: 80rpx;
		border-radius: 80rpx;
		background-color: $public-oclor;
		line-height: 80rpx;
		text-align: center;
		color: #ffffff;
		margin: 30rpx auto;
	}

	.repair-input {
		padding: 20rpx 32rpx;
		background-color: #f6f7fb;
		position: relative;
		background-color: #fff;

		input {
			padding: 0 60rpx 0 50rpx;
			height: 88rpx;
			border-radius: 88rpx;
			background-color: #ffffff;
		}
	}

	.repair {
		&-w {
			border-bottom: 20rpx solid #f6f7fb;

			&-q {
				padding: 30rpx 32rpx;

				&-p {
					font-size: 28rpx;
					color: #b6bdbd;
					line-height: 33rpx;
					margin-top: 40rpx;
				}

				&-i {
					display: flex;

					&-a {
						width: 160rpx;
						height: 160rpx;
						background: #f5f6f8;
						margin-right: 20rpx;
						border-radius: 4rpx;
						position: relative;

						image {
							border-radius: 4rpx;
						}
					}

					&-b {
						width: 160rpx;
						height: 160rpx;
						background: #f5f6f8;
						margin: 0 16rpx;
					}

					&-c {
						width: 160rpx;
						height: 160rpx;
						background: #f5f6f8;
						position: relative;

						.img {
							width: 60rpx;
							height: 60rpx;
							position: absolute;
							left: 50%;
							top: 50%;
							margin-top: -30rpx;
							margin-left: -30rpx;
						}
					}
				}

				&-t {
					border-bottom: 2rpx solid #f6f7fb;

					textarea {
						width: 100%;
					}
				}
			}

			&-n {
				padding: 20rpx 32rpx;
				background: linear-gradient(91deg, #e2ecfb 0%, rgba(255, 255, 255, 0) 100%);
				font-size: 28rpx;
				font-weight: 600;
				color: #6aa6fa;
				line-height: 33rpx;
			}
		}

		&-m {
			border-bottom: 20rpx solid #f6f7fb;

			&-n {
				padding: 20rpx 32rpx;
				background: linear-gradient(86deg,
						rgba(226, 140, 129, 0.15) 0%,
						rgba(226, 140, 129, 0) 100%);
				font-size: 28rpx;
				font-weight: 600;
				color: #e98d78;
				line-height: 33rpx;
			}

			&-f {
				margin: 0 25rpx;
				padding: 32rpx 0;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #f6f7fb;
				align-items: center;

				&-n {
					font-size: 28rpx;
					font-weight: 500;
					color: #3b3d3d;
					line-height: 33rpx;
				}

				&-i {
					font-size: 28rpx;
					font-weight: 500;
					color: #3b3d3d;
					line-height: 33rpx;
				}
			}
		}
	}
</style>